import React, { Component } from 'react';
import Banner from './../../components/viewbanner';
import { NavBar, Icon } from 'antd-mobile';
import { getBanners, getSub } from './../../api';
import axios from 'axios';
import style from './index.module.scss'

const videos =[
  {
    videoid: '1',
    img: '/images/hundundian.png',
    time: '/images/时间.png',
    title: ' 看看卡萨啊欧克hi'
  },
  {
    videoid: '2',
    img: '/images/helan.png',
    time: '/images/时间拷贝.png',
    title: '看看卡萨啊看看卡萨啊看看卡萨啊看看卡萨啊欧克hi'
  },
  {
    videoid: '3',
    img: '/images/hundundian.png',
    time: '/images/时间.png',
    title: '看看卡萨啊看看卡萨啊看看卡萨啊看看卡萨啊欧克hi'
  }
]
class Com extends Component {
  state={
    bannerlist: [],
    sublist: [],
    videos: videos,
    videolist: {},
    videodetail: []
  }

  componentDidMount() {
    // simulate img loading
    getBanners().then(res => {
      // console.log(res.data.data.slideshow)
      this.setState({
        bannerlist: res.data.data.slideshow
      })
    })
    getSub().then(res => {
      this.setState({
        sublist: res.data.data
      })
    })
    axios.get('http://rap2.taobao.org:38080/app/mock/244731/api/video').then(res=>{
      console.log(res)
      this.setState({
        videolist: res.data.data,
        videodetail: res.data.data.videos
      })
    })
  }
  render() {
    return (
      <div className='box'>
        {/* 头部 */}
        <header className='header'>
          <NavBar
            mode="light"
            // icon={<Icon type={require('./../../left.svg')} />}
            icon={ <span className="iconfont icon-fanhui" style={{ fontSize: '0.23rem', color: '#00B145' }}></span>}
            onLeftClick={() => {
              this.props.history.go(-1)
            }}
            rightContent={[
              <Icon key="0" type="ellipsis" color='#00B145' style={{ marginRight: '0.13rem' }} />
            ]}
            >精选视频
          </NavBar>
        </header>
        <div className='content' style={{backgroundColor:'#f4f4f4',}}>
          {/* 轮播图 */}
          <div className={style.banner}>
            <Banner bannerlist={this.state.bannerlist}></Banner>
          </div>
          {/* 热门精选 */}
          <p className={style.subject} >热门精选</p>
          <div className={style.docs}>
            {
              this.state.videos.map(item => {
                return <div className={style.video} key={item.videoid} onClick={ ()=>{
                  this.props.history.push('/video/detail')
                  }} >
                      <div style={{position: 'relative'}}>
                        <img style={{width: '1.48rem',height: '0.83rem',boxSizing: 'border-box',border: '1px'}} src={item.img} alt="" />
                        <img className={style.time} src={item.time} alt="" />
                      </div>
                      <p>{item.title}</p>
                    </div>
              })
            }
          </div>
          {/* 虚线 */}
            <div style={{width: '100%', border: '1px dashed #ccc', marginBottom: '0.19rem'}}></div>
            {/* 民宿 */}
            <div className={style.home}>
              <p style={{ fontSize: '0.14rem', fontWeight: 'bold', marginBottom: '0.15rem'}}>{this.state.videolist.title}</p>
              {/* 标题图像区域 */}
              <div className={style.home1}>
                <img src={this.state.videolist.banner} style={{borderRadius: '50%', width:'0.5rem', height: '0.5rem', marginRight: '0.1rem'}} alt=""/>
                <div style={{flex: 1}}>
                  <p>{this.state.videolist.name}</p>
                  <p style={{width: '100%'}}>{this.state.videolist.desc}<span style={{background:'url("/images/查看.png") no-repeat center right' ,paddingRight: '0.15rem', float:' right'}}>全部</span></p>
                </div>
            </div>
            <div className={style.videolook}>
            {
              this.state.videodetail.map((item,index) => {
                if(index<4){
                  return <div className={style.videoitem} key={item.videoid} onClick={ ()=>{
                    this.props.history.push('/video/detail')
                    }} >  
                    <div style={{position: 'relative'}}>
                      <img style={{width: '1.65rem',height: '0.84rem',boxSizing: 'border-box',border: '1px'}} src={item.src} alt="" />
                      <span className={style.itemtime}>{item.time}</span>
                    </div>
                    <p>{item.detail}</p>
                  </div>
                } else {
                  return false
                }
              })
            }
          </div>
          {/* 虚线 */}
          <div style={{width: '100%', border: '1px dashed #ccc', marginBottom: '0.19rem'}}></div>
        </div>
      </div>
    </div>
    );
  }
}

export default Com
